<template>
  <ContentWrap>
    <el-card shadow="never">
      <template #header>
        <div class="flex items-center">
          <Icon icon="ep:setting" class="mr-2" />
          <span class="text-lg font-semibold">教学课程辅助设置</span>
        </div>
      </template>

      <div class="space-y-6">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:calendar" class="text-4xl text-blue-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">课程安排</h3>
              <p class="text-gray-600">设置教学课程的时间安排和计划</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:user" class="text-4xl text-green-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">教师管理</h3>
              <p class="text-gray-600">管理教师信息和权限设置</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:document" class="text-4xl text-orange-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">课程资料</h3>
              <p class="text-gray-600">上传和管理课程相关文档</p>
            </el-card>
          </el-col>
        </el-row>

        <el-divider />

        <div class="text-center text-gray-500">
          <Icon icon="ep:info-filled" class="text-2xl mb-2" />
          <p>教学课程辅助设置功能正在开发中...</p>
        </div>
      </div>
    </el-card>
  </ContentWrap>
</template>

<script setup lang="ts">
defineOptions({ name: 'TeachingCourseSettings' })
</script>

<style scoped>
.space-y-6 > * + * {
  margin-top: 1.5rem;
}
</style>
